<template>
  <div id="app" class="w-screen h-screen" style="height: 100%">
    <transition name="web-fade">
      <router-view />
    </transition>
  </div>
</template>

<script>
import { useSocketStore } from '@/stores'
import { storeToRefs } from 'pinia'

export default {
  name: 'App',
  setup() {
    const socketStore = useSocketStore()
    const { socket } = storeToRefs(socketStore)
    
    return {
      socketStore,
      socket
    }
  },
  mounted() {
    this.socketStore.initSocket()
  }
}
</script>

<style>
@import url(./assets/font/iconfont.css);

#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-size: cover;
}
</style>
